import {Meta, Story, ArgTypes} from '@storybook/addon-docs/blocks';
import * as FontsDisplayStories from './FontsDisplay.stories.js';
import * as ColorsDisplayStories from './ColorsDisplay.stories.js';

<Meta title="Guide/Style/Fonts" />

# Typography

Some usage example can be checked [here](https://docs.google.com/spreadsheets/d/1S-gJUSw_hZyiANiKitxP_XOVgQPAgIa-PBSJNZFWPjE) for now. Later the examples will become part of the storybook.

<Story of={FontsDisplayStories.Default} />

<br />

# Examples

## text-base-normal

**Usage:** The base font for the application and is used everywhere. Examples are in a non-exhaustive list as it’s the base font.

<img
	src="guide/DesignSystem/FontExamples/text-base-normal.png"
	alt="Font example"
	style={{width: '700px', height: 'auto'}}
/>

<img
	src="guide/DesignSystem/FontExamples/text-base-normal-2.png"
	alt="Font example"
	style={{width: '700px', height: 'auto'}}
/>

## text-base-light

**Usage:** Messages in discussion need to be placed

<img
	src="guide/DesignSystem/FontExamples/text-base-light.png"
	alt="Font example"
	style={{width: '700px', height: 'auto'}}
/>

## text-base-bold

**Usage:** For emphasis e.g. review due date in review pop-up and author name in table along with table healdings

<img
	src="guide/DesignSystem/FontExamples/text-base-bold.png"
	alt="Font example"
	style={{width: '700px', height: 'auto'}}
/>

## text-lg-medium

**Usage:** Text Buttons and primary menu items

<img
	src="guide/DesignSystem/FontExamples/text-lg-medium.png"
	alt="Font example"
	style={{width: '700px', height: 'auto'}}
/>

## text-lg-semibold

**Usage:** Buttons

<img
	src="guide/DesignSystem/FontExamples/text-lg-semibold.png"
	alt="Font example"
	style={{width: '700px', height: 'auto'}}
/>
